<template>
    <div class="already">
        <el-table :data="tableData" style="width: 100%; text-align: center" 
             :height="600"  ref="table" :header-cell-style="{background:'#eee',color:'#000'}"
            class="table">
            <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
            <el-table-column prop="date" label="下单日期"> </el-table-column>
            <el-table-column prop="orderNo" label="订单号">
                <template slot-scope="scope">
                    <el-link type="primary" @click="handleDetail(scope.row)">{{
                        scope.row.orderNo
                    }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="waybillNo" label="运单号">
                <template slot-scope="scope">
                    <div style="color: #409eff;" v-for="(item, index) in scope.row.waybillNo" :key="index">
                        <div>{{ item }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <div v-if="scope.row.status == '已收货'"><div style="width:8px;height:8px;background:#32B457;margin-right:5px;border-radius: 50%;display:inline-block;"></div>{{ scope.row.status }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="brand" label="型号"> </el-table-column>
            <el-table-column prop="money" label="订单金额">
                <template slot-scope="scope">
                    <div style="color:#32B457;">{{scope.row.money}}</div>
                </template>  
            </el-table-column>
            <el-table-column prop="currency" label="币种"> </el-table-column>
            <el-table-column prop="desc" label="备注"> </el-table-column>
        </el-table>
        <div>
            <el-pagination class="pagination" layout="total,sizes,prev, pager, next,jumper" :total="50">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name:'alreadyTable',
        data() {
        return {
            tableData: [
                {
                    date: "2023-02-20",
                    orderNo: "DD22020000295",
                    waybillNo: ["SF1000000001"],
                    status: "已收货",
                    brand: "H1 H2 H3 H4",
                    money: 1000,
                    currency: "人民币",
                    desc: "",
                },
                {
                    date: "2023-02-20",
                    orderNo: "DD22020000295",
                    waybillNo: ['SF1000000001', 'SF1000000001'],
                    status: "已收货",
                    brand: "H1 H2 H3 H4",
                    money: 1000,
                    currency: "人民币",
                    desc: "",
                },
                {
                    date: "2023-02-20",
                    orderNo: "DD22020000295",
                    waybillNo: ["SF1000000001"],
                    status: "已收货",
                    brand: "H1 H2 H3 H4",
                    money: 1000,
                    currency: "人民币",
                    desc: "",
                },
            ],
        }
    },
    methods: {
        //详情
        handleDetail(row) {
            this.$router.push({name:'myReceiptDetail',params:{status:row.status}});
            window.sessionStorage.state = row.status;
        },
        //修改状态
        updateStatus() {
            this.tableData.map(item => {
                if (item.status == '待收货' || item.status == '部分收货') {
                    Object.assign(item, { status: '已收货' })
                    return item
                }
            })
        }
    }
    }
</script>

<style scoped lang="scss">
.already{
    .table{
        margin-top: 10px;
    }
    .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>